<template>
  <div class="medalWell">
    <div class="wrap">
      <div class="swiper">
        <img src="static/img/shequjumin.gif"/>
        <img src="static/img/shequmingxing.gif"/>
        <img src="static/img/zuiaishafa.gif"/>
        <img src="static/img/zhongshihuiyuan.gif"/>
        <img src="static/img/xihuandaren.gif"/>
        <img src="static/img/shequlaomo.gif"/>
        <img src="static/img/yuanchuangxieshou.gif"/>
        <img src="static/img/zhuixingyizu.gif"/>
      </div>

      <div class="swiperClick">
        <i class="iconfont prev" @click="handleMedalPrev">&#xe8fc;</i>
        <i class="iconfont next" @click="handleMedalNext">&#xe6b7;</i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MedalWell',
  data () {
    return {
      clickCount: 0
    }
  },
  methods: {
    handleMedalPrev () {
      const defaultColor = $('.prev').css('color');
      if(defaultColor == '#d3d3d3'){
        return
      }
      if (this.clickCount > 0) {
        $('.swiper img').eq(this.clickCount-1).css('margin-left','.04rem');
        this.clickCount --;
        $('.next').css({
          'color':'#999'
        });
      }
      if (this.clickCount <= 0) {
        $('.prev').css({
          'color':'#d3d3d3'
        });
      }                                     
    },
    handleMedalNext () {
      const defaultColor = $('.next').css('color');
      const length = $('.swiper img').length;
      const num = 6;
      if(defaultColor == '#d3d3d3'){
        return 
      }
      if(this.clickCount < (length-num)) {
        $('.swiper img').eq(this.clickCount).css('margin-left','-.66rem');
        $('.prev').css({
          'color':'#999'
        });
        this.clickCount ++;
      }
      if(this.clickCount >= (length-num)){
        $('.next').css({
          'color': '#d3d3d3',
        });
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~assets/css/variables.styl';
  .medalWell
    line-height: .66rem
    height: .66rem
    width: 100%
    padding: .15rem 0
    margin-bottom: .25rem
    .swiper
      line-height: .76rem
      height: .76rem
      overflow: hidden
      img:nth-child(1)
        margin-left: 0
      img
        width: .6rem 
        height: .6rem
        display: block
        float: left
        margin: .08rem .05rem
        text-align: left
        opacity: 0.5
    .swiperClick:hover
      color: $font-deep
    .swiperClick
      position: absolute
      right: .34rem
      margin-top: -.66rem
      z-index: $normal-index
      width: .66rem
      height: .66rem
      display: flex
      justify-content: center
      .iconfont
        font-size: .28rem
        cursor: pointer
      .prev
        color: #d3d3d3
      .next
        color: #666
</style>

